<!-- 个人中心 -->
<template>
    <view class="container">
        <view class="cu-form-group" style="min-height: 150rpx">
            <view class="title">{{detail.title}}</view>
        </view>
        <view class="cu-form-group">
            <view class="title">*姓名：</view>
            <input v-model="name" placeholder="请输入姓名" placeholder-style="font-size: 28rpx;color: #CCCCCC;"></input>
        </view>
        <view class="cu-form-group">
            <view class="title" style="flex: 1;">*性别：</view>
            <view>
				<radio-group @change="radioChange">
                <!-- <label class="radio"> -->
                <radio value="1" checked="true" />先生
                <!-- </label> -->
                <!-- <label class="radio"> -->
                <radio value="2" />女士
                <!-- </label> -->
				</radio-group>
            </view>

        </view>
        <view class="cu-form-group">
            <view class="title">*年龄：</view>
            <input v-model="age" placeholder="请输入您的年龄" placeholder-style="font-size: 28rpx;color: #CCCCCC;"></input>
        </view>
        <view class="cu-form-group">
            <view class="title">*职务：</view>
            <input v-model="duties" placeholder="请输入您的职务" placeholder-style="font-size: 28rpx;color: #CCCCCC;"></input>
        </view>
        <view class="cu-form-group">
            <view class="title">*手机：</view>
            <input  v-model="tel" placeholder="请输入您的手机" placeholder-style="font-size: 28rpx;color: #CCCCCC;"></input>
        </view>
        <view class="cu-form-group">
            <view class="title">*邮箱：</view>
            <input  v-model="mail" placeholder="请输入您的邮箱" placeholder-style="font-size: 28rpx;color: #CCCCCC;"></input>
        </view>
        <view class="cu-form-group">
            <view class="title" style="flex: 1;">*常驻城市：</view>
            <view>

                <picker mode="region" :value="regionValue" @change="bindRegionChange">
                    <image v-if="regionValue.length ===0" style="width: 34rpx;height: 20rpx;"
                        src="../../static/image/zb17.png"> </image>
                    <view v-else>{{region}}</view>
                </picker>

            </view>
        </view>
        <view class="cu-form-group">
            <view class="title">*工作单位：</view>
            <input v-model="company" placeholder="请输入您的工作单位" placeholder-style="font-size: 28rpx;color: #CCCCCC;"></input>
        </view>
        <view class="shuoming" style="display: flex;align-items: center;margin-left: 10rpx;">
           <checkbox-group @change="checkChange"><checkbox value="true" /></checkbox-group>
           <view style="margin-left: 10rpx;    font-size: 27rpx;"> <text @click="open()" style="color: #999999;">我已阅读并接受</text>
            <text @click="open()" style="color: #DE2415;">《关于“珠宝资讯网”内容发布协议》</text>
        </view>
		</view>
        <view @click="success()"  class="searchBtn" >确认</view>

        <uni-popup ref="popup" type="bottom">
            <view class="popbox">
                <view class="bt">胡博士珠宝同学会入会协议</view>
                <view class="nr">更新日期2020年12月03日</view>
                <view class="nr">
                    《胡博士珠宝同学会使用协议》（以下简称本协议）是由深圳市胡博士珠宝文化传播有限公司网站（包括PC端、移动端及应用程序）的用户（以下简称“用户”或“您”）与胡博士珠宝同学会网站的运营方，即深圳胡博士文化传播有限公司（以下简称“本平台”）等相关事宜共同缔结。本协议具有合同效益，您应当阅读并遵守本协议。请您务必审慎阅读、充分理解各条款内容，特别是以黑体加粗形式提醒您主义的条款。
                </view>
                <view class="title1">一、协议确认
                </view>
                <view class="nr">
                    1、您点击确认本协议条款并点击注册后，才能成为珠宝同学会的正式注册用户，并享受各类服务。在您完成用户注册后，即表示您接受并同意本协议。若您不同意本协议，或对本协议有任何疑问的，请您停止胡博士珠宝同学会的注册程序。2、您点击确认本协议条款并点击注册后，才能成为珠宝同学会的正式注册用户，并享受各类服务。在您完成用户注册后，即表示您接受并同意本协议。若您不同意本协议，或对本协议有任何疑问的，请您停止胡博士珠宝同学会的注册程序。
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				detail:{},
				name:'',
				sex:'1',
				age:'',
				duties:'',
				tel:'',
				mail:'',
				address:'',
				company:'',
                regionValue: [],
                region: '省、市、区、街道',
                infoData: {},
                imgList: [{
                        id: 0,
                        img: '../../static/image/zb1.png'
                    },
                    {
                        id: 1,
                        img: '../../static/image/zb2.png'
                    },
                    {
                        id: 2,
                        img: '../../static/image/zb3.png'
                    },
                    {
                        id: 3,
                        img: '../../static/image/zb4.png'
                    },
                ],
				article_id:''
            }
        },
        onLoad(options) {
			this.article_id=options.id
           this.trainDetail();
        },
        onShow() {

        },
        computed: {

        },
        methods: {
			trainDetail(){
						   this.$api.trainDetail({
						   	id  :this.article_id
						   }).then(res => {
						       console.log('trainDetail',res)
						       if(res.code ==1){
						          this.detail=res.data
						       }
						   });
			},
			checkChange(e){
				console.log('e',e)
				if(e.detail.value.length>0){
					this.ischeck=true
				}
			},
            submit(){
                 
                 
            },
			radioChange(e){
				console.log('e',e)
				this.sex=e.detail.value
			},
            bindRegionChange(e) {
                console.log('112', this.regionValue, e)
                console.log(('e', e))
                if (e.detail.value.length > 0) {
                    this.regionValue = e.detail.value
                    this.region = e.detail.value[0] + '-' + e.detail.value[1] + '-' + e.detail.value[2]
                }
            },
            open() {
                // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
                this.$refs.popup.open('bottom')
            },
            success(){
				if(this.ischeck==false){
					uni.showToast({
						title:'请先阅读使用协议 '
					})
					return
				}
				let that=this
				that.$api.trainEnrollAdd({
					name:that.name,
					sex:that.sex,
					age:that.age,
					duties:that.duties,
					tel:that.tel,
					mail:that.mail,
					address:that.region,
					company:that.company,
					article_id:that.article_id
				}).then(res => {
					console.log('res',res)
					if(res.code ==1){
						uni.navigateTo({
						    url:'/pages/jewel/signupsuccessfully'
						})
					}else{
						uni.showToast({
							title:"提交失败"
						})
					}
				});
           
            }
        },
    }
</script>

<style lang="scss" scoped>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        background: #ffffff;
    }

    .container {
        padding: 0rpx 30rpx 30rpx 0rpx;
    }

    .cu-form-group {
        background-color: var(--white);
        padding: 1rpx 30rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 90rpx;
        border-bottom: 0.5px solid #eeeeee;
    }

    .cu-form-group input {
        text-align: right;
    }

    .title {
        font-size: 28rpx;
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: bold;
        color: #333333;
    }

    .searchBtn {
        width: 280rpx;
        height: 78rpx;
        background: #DE2415;
        border-radius: 10rpx 10rpx 10rpx 10rpx;
        opacity: 1;
        line-height: 75rpx;
        color: #FFFFFF;
        font-weight: bold;
        font-size: 30rpx;
        text-align: center;
        margin: 50rpx auto;
    }

    .grid {
        display: flex;
        flex-wrap: wrap;
    }

    .margin-bottom {
        margin-bottom: 30rpx;
    }

    .text-center {
        text-align: center;
    }

    .grid.col-2>view {
        width: 50%;
    }

    .padding {
        padding: 30rpx;
    }

    .bg-cyan {
        background-color: var(--cyan);
        color: var(--white);
    }

    .name {
        font-size: 30rpx;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        margin-top: 20rpx;
    }

    .shuoming {
        margin-top: 22rpx;
    }

    .popbox {
        height: 1092rpx;
        background: #FFFFFF;
        border-radius: 10rpx 10rpx 0rpx 0rpx;
        opacity: 1;
        padding: 30rpx;
    }
    .bt{
        font-size: 32rpx;
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: bold;
        color: #333333;
        text-align: center;
    }
    .nr{
        font-size: 28rpx;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        font-weight: 500;
        color: #666666;
        margin-top: 30rpx;
    }
        
    .title1{
        font-size: 28rpx;
        font-family: Source Han Sans CN-Bold, Source Han Sans CN;
        font-weight: bold;
        color: #333333;
        margin-top: 50rpx;
    }
</style>
